<div class="theme-validation-container">
    <header class="modal-header">
        <h1 data-test-theme-warnings-title>
            {{#unless this.canActivate}}
                {{this.title}}
            {{else}}
                {{this.title}} with {{#if this.errors}}errors{{else}}warnings{{/if}}
            {{/unless}}
        </h1>
    </header>
    <a class="close" href="#" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>

    <div class="modal-body">
        {{#if this.fatalErrors}}
            <div>
                <h2 class="mb0 mt4 f5 fw6 red">Fatal Errors</h2>
                <p class="mb2 red">Must-fix to activate theme</p>
            </div>
            <ul class="pa0" data-test-theme-fatal-errors>
            {{#each this.fatalErrors as |error|}}
                <li class="theme-validation-item theme-fatal-error">
                    <GhThemeErrorLi @error={{error}} />
                </li>
            {{/each}}
            </ul>
        {{/if}}

        {{#if this.errors}}
            <div>
                <h2 class="mb0 mt4 f5 fw6">Errors</h2>
                <p class="mb2">Highly recommended to fix, functionality <span>could</span> be restricted</p>
            </div>

            <ul class="pa0" data-test-theme-errors>
            {{#each this.errors as |error|}}
                <li class="theme-validation-item theme-error">
                    <GhThemeErrorLi @error={{error}} />
                </li>
            {{/each}}
            </ul>
        {{/if}}

        {{#if (and this.warnings (or this.fatalErrors this.errors))}}
            <div>
                <h2 class="mb0 mt4 f5 fw6">Warnings</h2>
            </div>
        {{/if}}
        {{#if this.warnings}}
            <ul class="pa0" data-test-theme-warnings>
            {{#each this.warnings as |error|}}
                <li class="theme-validation-item theme-warning">
                    <GhThemeErrorLi @error={{error}} />
                </li>
            {{/each}}
            </ul>
        {{/if}}
    </div>
</div>

<div class="modal-footer">
    <button {{action "closeModal"}} class="gh-btn" data-test-modal-close-button>
        <span>Ok</span>
    </button>
</div>
